<route lang="jsonc" type="page">
    {
      "style": {
			"navigationStyle": "custom",
			"navigationBarTitleText": "个人资料"
		}
    }
</route>

<template>
	<view class="profile-page">
		<header-navbar title="个人资料" round bg-color="rgba(255,255,255,0)" />
		<!-- 用户信息 -->
		<user-info direction="column" />
		
		<view class="cell-list">
			<view class="cell-item shadow">
				<view class="cell-item_label">我的昵称</view>
				
				<wd-input
					type="nickname"
					v-model="nickname"
					custom-class="cell-item_center"
					no-border
					:maxlength='7'
					placeholder="请输入昵称"
					confirm-type='保存'
					@blur="handleConfirm(1)"
				/>
				
<!-- 				<view class="cell-item_right">
					<wd-button type="text" custom-class="btn-nickname" open-type="getUserProfile" @click="onGetUserInfo">使用微信昵称</wd-button>
					<wd-icon name="arrow-right" size="18px" color='#BDBCBC'></wd-icon>
				</view> -->
			</view>
			
			<view class="cell-item shadow">
				<view class="cell-item_label">手机号码</view>
				
				<wd-input
					type="text"
					v-model="mobile"
					custom-class="cell-item_center"
					no-border
					:maxlength='11'
					readonly
					placeholder="请输入手机号码"
					confirm-type='确定'
					@confirm="handleConfirm(2)"
				/>
			</view>
		</view>
		
		<view
			class="btn-logout"
			:style="{ marginBottom: safeAreaInsets?.bottom > 0 ? `${safeAreaInsets?.bottom}px` : null }"
			@click="handleLogout"
		>退出登录</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import HeaderNavbar from '@/pages/components/header-navbar.vue';
	import UserInfo from '@/pages/me/user.vue';
	import { checkMobleRule } from '@/utils'
	import { useSafeAreaInsets } from '@/mixins/basic'
	import { useUserStore } from '@/store/user'
	import { onShow } from '@dcloudio/uni-app';
	import { changeNickname } from '@/api/user'
	
	const { safeAreaInsets } = useSafeAreaInsets()
	const userStore = useUserStore()

	defineOptions({
		options: {
			styleIsolation: 'shared'
		}
	})
	
	const nickname = ref()
	const mobile = ref()
	
	onShow(() => {
		nickname.value = userStore.userInfo.nickname
		mobile.value = userStore.userInfo.mobile
	})

	function handleConfirm(type: number) {
		if (nickname.value === userStore.userInfo.nickname) return

		// 校验昵称
		if (type === 1 && nickname.value.length <= 1) {
			return uni.showToast({
				icon: 'none',
				title: '昵称最少2个字',
				duration: 3000
			})
		}
		// 校验手机号
		// if (type === 2 && !checkMobleRule(mobile.value)) return uni.showToast({
		// 	icon: 'none',
		// 	title: '请输入正确的手机号',
		// 	duration: 3000
		// })
		
		changeNickname({
			nickname: nickname.value
		}).then(res => {
			// userStore.setUserInfo({
			// 	...userStore.userInfo,
			// 	nickname: nickname.value
			// })
			userStore.getUserInfo()
			uni.showToast({
				icon: 'success',
				title: '修改成功'
			})
		})
	}
	// 退出登录
	function handleLogout() {
		userStore.logout()
		uni.reLaunch({
			url: '/pages/index/index'
		});
	}
	
	// function onGetUserInfo(res) {
	// 	uni.getUserProfile({
	// 	  desc: '授权获取用户昵称',
	// 	  success: (res) => {
	// 		console.log('获取到的用户信息', res)
	// 	  },
	// 	  // 失败回调
	// 	  fail: (err) => {
	// 		console.log('选择了拒绝')
	// 	  },
	// 	})
	// }
</script>

<style lang="scss" scoped>
	.profile-page {
		.cell-list {
			padding: 26px;
		}
		
		:deep(.btn-nickname) {
			color: #989898 !important;
			padding: 0 !important;
			height: 20px !important;
		}
		
		.btn-logout {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #58618E;
			padding: 3px 0;
			border-radius: 8px;
			text-align: center;
			color: #fff;
			font-size: 12px;
			font-weight: 600;
			margin: 0 40px 40px 40px;
			line-height: 22px;
			&:active {
				background-color: rgba(#58618E, 0.9)
			}
		}
	}
</style>